<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>Title</title>
</head>
<body>

<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">登录</li>
        <li>注册</li>


    </ul>
    <div class="layui-tab-content" style="height: 500px;">
        <div class="layui-tab-item layui-show" style="height: 100%" >
            <iframe src="login.html" frameBorder="0"  style="width:100%;height: 100%"></iframe>
        </div>
        <div class="layui-tab-item" style="height: 100%"><iframe src="register.html" frameBorder="0"  style="width:100%;height: 100%"></iframe></div>

    </div>
</div>


<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>


</body>
</html>